import './css/electric10.less'

export default function () {
  const cell = this.createNode({
    shape: 'custom-electric',
    width: 14,
    height: 60,
    markup: [
      {
        tagName: 'g',
        selector: 'group1',
        children: [
          {
            tagName: 'polyline',
            selector: 'line1',
            groupSelector: 'outline',
            attrs: {
              points: '7,0 7,60'
            }
          }
        ]
      },
      {
        tagName: 'g',
        selector: 'group2',
        children: [
          {
            tagName: 'polyline',
            selector: 'polyline2_1',
            groupSelector: 'outline',
            attrs: {
              points: '0,13 7,6 14,13'
            }
          },
          {
            tagName: 'polyline',
            selector: 'polyline2_2',
            groupSelector: 'outline',
            attrs: {
              points: '0,17 7,10 14,17'
            }
          }
        ]
      },
      {
        tagName: 'g',
        selector: 'group3',
        children: [
          {
            tagName: 'rect',
            selector: 'rect3',
            attrs: {
              x: 2,
              y: 22,
              width: 10,
              height: 16,
              class: 'anima-change-bg'
            }
          }
        ]
      },
      {
        tagName: 'g',
        selector: 'group4',
        children: [
          {
            tagName: 'polyline',
            selector: 'polyline4_1',
            groupSelector: 'outline',
            attrs: {
              points: '0,43 7,50 14,43'
            }
          },
          {
            tagName: 'polyline',
            selector: 'polyline4_2',
            groupSelector: 'outline',
            attrs: {
              points: '0,47 7,54 14,47'
            }
          }
        ]
      }
    ],
    attrs: {
      transition: {
        fill: '#f00',
        stroke: '#f00'
      }
    },
    ports: {
      items: [
        {
          group: 'top'
        },
        {
          group: 'bottom'
        }
      ]
    }
  })

  // cell.transition('rect', {
  //   attributeType: 'CSS',
  //   attributeName: 'fill',
  //   from: 'red',
  //   to: 'green',
  //   dur: '1s',
  //   repeatCount: 'indefinite'
  // })

  console.log(cell)

  return cell
}
